@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

@mixin title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vw;
    .left {
        i {
            font-size: 7.2vw;
            color: #ff9344;
        }
        span {
            display: inline-block;
            font-size: 4vw;
            height: 6.07vw;
            line-height: 6.07vw;
            vertical-align: text-bottom;
            color: #000000;
        }
    }
    .right {
        i {
            font-size: 3.37vw;
            color: #ff9344;
        }
        span {
            font-size: 4vw;
            line-height: 6.07vw;
            color: #000000;
        }
    }
}

@mixin list {
    font-size: 3.47vw;
    .back {
        width: 16.4vw;
        height: 7.6vw;
        border-radius: 2.67vw;
        border: solid 0.27vw #ff9344;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
    }
    .size {
        font-size: 6.67vw;
        color: #ff9344
    }
}

header {
    @include list;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 20vw;
    display: flex;
    justify-content: space-between;
    padding: 2.27vw 3.07vw;
    align-items: center;
    background-color: #ffffff;
    .logo {
        width: 16.4vw;
        height: 16.4vw;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .search {
        position: relative;
        input {
            width: 35.47vw;
            height: 6.8vw;
            background-color: #ffffff;
            border: solid 0.27vw #ff9344;
            border-radius: 5vw;
            box-sizing: border-box;
            font-size: 3vw;
            padding: 1.73vw 0 1.73vw 3.87vw;
        }
        i {
            position: absolute;
            font-size: 4vw;
            color: #ff9344;
            right: 1.5vw;
            top: 1.5vw;
            z-index: 10;
        }
    }
    .s {
        position: relative;
        .city {
            width: 21.2vw;
            height: 7.47vw;
            background-color: #ffffff;
            border: solid 0.27vw #ff9344;
            appearance: none;
            -webkit-appearance: none;
            font-size: 3vw;
            border-radius: 1vw;
            padding-left: 1vw;
            option {
                width: 100%;
            }
        }
        .t {
            pointer-events: none;
            position: absolute;
            top: 2.3vw;
            right: 6px;
            display: inline-block;
            width: 0;
            height: 0;
            border: 2vw solid transparent;
            border-top: 3vw solid #ff9344;
        }
    }
    .e_mail {
        position: relative;
        i {
            font-size: 8.27vw;
            color: #ff9344;
        }
        span {
            position: absolute;
            top: 0;
            right: 0vw;
            display: inline-block;
            background-color: red;
            border-radius: 50%;
            width: 3.27vw;
            height: 3.27vw;
            font-size: 1.2vw;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
    }
}

main {
    position: absolute;
    top: 20vw;
    bottom: 17.2vw;
    overflow: auto;
    left: 0;
    right: 0;
}

footer {
    width: 100vw;
    height: 17.2vw;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    a {
        color: black;
    }
    .item {
        .action {
            color: #ff9344;
        }
        i {
            font-size: 9.47vw;
        }
        p {
            font-size: 3vw;
        }
    }
}

@media screen and(min-width:769px) and(max-width:1025px) {
    header {
        height: 12vw;
        .logo {
            width: 10vw;
            height: 10vw;
        }
        .search {
            input {
                width: 50vw;
            }
        }
    }
    main {
        top: 12vw;
        bottom: 10vw;
    }
    footer {
        height: 10vw;
        .item {
            i {
                font-size: 5vw;
            }
            p {
                font-size: 3vw;
            }
        }
    }
}